<template>
  <div>
    <el-row>
      <!-- 放幻灯片 -->
      <el-col :span="24">
        <HomeCarousel></HomeCarousel>
      </el-col>
    </el-row>

    <div class="bg_all" id="serviceRkArea">
      <!--服务入口-->
      <div class="service">
        <div class="service_box">
          <a href="https://shop.10086.cn/i/?f=billqry">
            <img src="../assets/home/zd.png" title="账单查询" alt="账单查询" />
            <p>账单查询</p>
          </a>
        </div>
        <div class="service_box">
          <a href="https://shop.10086.cn/i/?f=myinvoice">
            <img src="../assets/home/fp.png" title="电子发票" alt="电子发票" />
            <p>电子发票</p>
          </a>
        </div>
        <div class="service_box">
          <a href="https://shop.10086.cn/i/?f=rechargecredit">
            <img src="../assets/home/cz.png" title="充值交费" alt="充值交费" />
            <p>充值交费</p>
          </a>
        </div>
        <div class="service_box">
          <a href="https://www.10086.cn/5G/">
            <img src="../assets/home/5g.png" title="5G专区" alt="5G专区" />
            <p>5G专区</p>
          </a>
        </div>
      </div>
      <!--服务入口结束-->
      <div class="business" id="bussinessArea">
        <div class="business_box01">
          <a href="https://shop.10086.cn/goods/100_100_1087889_1080669.html">
            <img src="../assets/home/vivoy77.png" alt="vivo Y77" title="vivo Y77" />
          </a>
        </div>
        <!--间隔-->
        <div class="business_box02">
          <div class="bs_pic">
            <a href="https://shop.10086.cn/goods/100_100_1087708_1079762.html">
              <img src="../assets/home/ry70.png" alt="荣耀70" title="荣耀70" />
            </a>
          </div>
        </div>
        <!--间隔-->
        <div class="business_box03">
          <div class="bs_pic">
            <a
              href="https://wx.10086.cn/website/businessPlatform/pc-container?link=https%3A%2F%2Fwx.10086.cn%2Fwebsite%2FbusinessPlatform%2Fhome%2Fbroadband%2FunityAppointment"
            >
              <img src="../assets/home/kd.png" alt="家庭宽带" title="家庭宽带" />
            </a>
          </div>
        </div>
        <!--间隔-->
        <div class="business_box01 business_box04">
          <div class="yewu_box">
            <a
              href="https://wx.10086.cn/website/businessPlatform/pc-container?link=https%3A%2F%2Fwx.10086.cn%2Fwebsite%2FbusinessPlatform%2FshopDetail%3FproductCode%3D15343092%26productId%3D2006432"
            >
              <img src="../assets/home/5gtc.png" alt="5G套餐优惠" title="5G套餐优惠" />
              <div class="yw_bm">
                <h3>5G套餐优惠</h3>
                <div class="ywbm_txt">移动套餐|极速体验</div>
              </div>
            </a>
          </div>
          <div class="yewu_box">
            <a
              href="https://wx.10086.cn/website/businessPlatform/pc-container?link=https%3A%2F%2Fwx.10086.cn%2Fwebsite%2FbusinessPlatform%2FshopDetail%3FproductId%3D2133510%26productCode%3D15379866%26secondChannel%3Dzgydwtsycd"
            >
              <img src="../assets/home/ydyp.png" alt="移动云盘40GB空间" title="移动云盘40GB空间" />
              <div class="yw_bm">
                <h3>移动云盘40GB空间</h3>
                <div class="ywbm_txt">0元体验咪咕、云盘、视频彩铃</div>
              </div>
            </a>
          </div>
          <div class="yewu_box">
            <a href="https://h.app.coc.10086.cn/cmcc-app/pc-pages/tariffZone.html?prov=100">
              <img src="../assets/home/zf.png" alt="资费公示专区" title="资费公示专区" />
              <div class="yw_bm">
                <h3>资费公示专区</h3>
                <div class="ywbm_txt">在售资费查询</div>
              </div>
            </a>
          </div>
          <div class="yewu_box">
            <a
              href="https://wx.10086.cn/website/businessPlatform/pc-container?link=https%3A%2F%2Fwx.10086.cn%2Fwebsite%2FbusinessPlatform%2FshopDetail%3FproductCode%3D6641846%26productId%3D2017898"
            >
              <img src="../assets/home/syy.png" alt="首月1元铂金VIP" title="首月1元铂金VIP" />
              <div class="yw_bm">
                <h3>首月1元铂金VIP</h3>
                <div class="ywbm_txt">2GB+腾讯优酷等视频月卡</div>
              </div>
            </a>
          </div>
          <div class="yewu_box">
            <a
              href="https://wx.10086.cn/website/businessPlatform/pc-container?link=https%3A%2F%2Fwx.10086.cn%2Fwebsite%2FbusinessPlatform%2FshopDetail%3FproductCode%3D13688701%26productId%3D49805"
            >
              <img src="../assets/home/15g.png" alt="15GB+视频会员月卡" title="15GB+视频会员月卡" />
              <div class="yw_bm">
                <h3>15GB+视频会员月卡</h3>
                <div class="ywbm_txt">会员每月可换</div>
              </div>
            </a>
          </div>
          <div class="yewu_box">
            <a href="https://www.10086.cn/roaming/">
              <img src="../assets/home/gj.png" alt="国际/中国港澳台业务专区" title="国际/中国港澳台业务专区" />
              <div class="yw_bm">
                <h3>国际/中国港澳台业务专区</h3>
                <div class="ywbm_txt">出境流量月包随心选</div>
              </div>
            </a>
          </div>
        </div>
        <!--间隔-->
      </div>

      <div class="brand" id="brandArea">
        <div class="brand_box">
          <a href="javascript:;" style="cursor:default;">
            <div class="brand_pic">
              <img src="../assets/home/qqt.png" title="全球通" alt="全球通" />
            </div>
            <div class="brand_bm">
              <h3>全球通</h3>
              <span>我能</span>
              <p>
                <font
                  title="“全球通”是中国移动的旗舰客户品牌。自创立以来，全球通始终坚持用高质量服务、高标准品质赢得客户信赖。伴随移动业务发展，全球通持续践行“我能”的品牌理念，不仅以尊享服务继承延续着优质可靠的品牌形象，更积极开展公益、健康、文化等主题活动，丰富“创新、进取、品位”的品牌新内涵。"
                >“全球通”是中国移动的旗舰客户品牌。自创立以来，全球通始终坚持用高质量服务、高标准品质赢得客户信赖。伴随移动业务发展，全球通持续践行“我能”的品牌理念，不仅以尊享服务继承延续着优质可靠的品牌形象，更积极开展公益、健康、文化等主题活动，丰富“创新、进取、品位”的品牌新内涵。</font>
              </p>
            </div>
          </a>
        </div>
        <div class="brand_box">
          <a href="javascript:;" style="cursor:default;">
            <div class="brand_pic">
              <img src="../assets/home/dgdd.png" title="动感地带" alt="动感地带" />
            </div>
            <div class="brand_bm">
              <h3>动感地带</h3>
              <span>我的地盘，听我的</span>
              <p>
                <font
                  title="“动感地带”是中国移动面向年轻人打造的“通信潮牌”。焕新以来，围绕“智潮感”，动感地带布局元宇宙，推出“数智代言人橙络络”，结合5G打造萌卡、潮玩卡等产品，持续开展音乐、街舞等圈层活动，建立“社交媒体矩阵”快速深入年轻群体。"
                >“动感地带”是中国移动面向年轻人打造的“通信潮牌”。焕新以来，围绕“智潮感”，动感地带布局元宇宙，推出“数智代言人橙络络”，结合5G打造萌卡、潮玩卡等产品，持续开展音乐、街舞等圈层活动，建立“社交媒体矩阵”快速深入年轻群体。</font>
              </p>
            </div>
          </a>
        </div>
        <div class="brand_box">
          <a href="javascript:;" style="cursor:default;">
            <div class="brand_pic">
              <img src="../assets/home/szx.jpg" title="神州行" alt="神州行" />
            </div>
            <div class="brand_bm">
              <h3>神州行</h3>
              <span>我看行</span>
              <p>
                <font
                  title="“神州行”是中国移动面向特定垂类市场的客户品牌。全新升级后，面向银发族和快递外卖员，推出孝心卡和骑士卡，彰显“回馈、关怀、自豪”的品牌内涵，聚焦客户需求，提升客户获得感。神州行还将面向更多垂类用户，推出更加丰富的卡品和服务。"
                >“神州行”是中国移动面向特定垂类市场的客户品牌。全新升级后，面向银发族和快递外卖员，推出孝心卡和骑士卡，彰显“回馈、关怀、自豪”的品牌内涵，聚焦客户需求，提升客户获得感。神州行还将面向更多垂类用户，推出更加丰富的卡品和服务。</font>
              </p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import HomeCarousel from "@/components/HomeCarousel.vue";

export default {
  data() {
    return {};
  },
  methods: {},
  created() {},
  components: {
    HomeCarousel
  }
};
</script>
  
<style scoped>
* {
  font-family: "microsoft yahei" Helvetica;
}
li {
  list-style: none;
}
img {
  display: block;
  border: none;
}
a {
  cursor: pointer;
}
a:link,
a:visited {
  text-decoration: none;
  color: #333333;
  transition: all 0.2s ease;
  cursor: pointer;
}
a:hover,
a:active {
  text-decoration: none;
  color: #333333;
}
input,
button {
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  -webkit-text-size-adjust: 100%;
}
.clear {
  clear: both;
}
.common_head {
  box-shadow: none;
}
* {
  box-sizing: content-box !important;
}

/*固定页面头部的头开始*/
#head2 {
  width: 100%;
  height: 61px;
  margin: 0 auto;
  border-bottom: 1px solid #24a7f9;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1000;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  position: fixed;
}
.head2_1200 {
  width: 1200px;
  height: 61px;
  margin: 0 auto;
}
.head2_1200 .logo {
  float: left;
  width: 230px;
  height: auto;
  margin: 9px 0 0 0;
}
.head2_1200 .nav {
  float: left;
  height: 50px;
  padding-top: 11px;
  padding-left: 45px;
}
.head2_1200 .nav li {
  float: left;
  height: 50px;
  padding: 0 17px;
}
.head2_1200 .nav li a {
  display: block;
  height: 33px;
  padding: 0 7px;
  font: 16px/33px "microsoft yahei";
  color: #222222;
  background: #ffffff;
  border-radius: 5px;
}
.head2_1200 .nav li a:hover {
  color: #ffffff;
  background: #2ba7ff;
}
.head2_1200 .nav li a.active {
  color: #ffffff;
  background: #2ba7ff;
}

.head2_search {
  float: right;
  width: 285px;
  padding-top: 11px;
  margin-right: 50px;
}
.head2_search .searchbar .input-group-btn .btn {
  width: 80px;
  height: 35px;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  opacity: 0;
  filter: alpha(opacity=0);
  text-align: center;
  font: bold 16px/36px "microsoft yahei";
  color: #fff;
}
.head2_search .search_toplist a {
  display: block;
  width: 100%;
  height: 35px;
  padding: 0 20px;
  text-align: left;
  border: 0;
  font: 14px/35px "微软雅黑";
  box-sizing: border-box !important;
}
.head2_search .search_toplist a:hover {
  background: #f4f4f4;
}
.head2_search .search_toplist {
  display: block;
  width: 283px;
  background: #fff;
  border: 1px solid #ddd;
  position: absolute;
  top: 34px;
  left: -2px;
  right: 0;
  padding: 0;
  box-sizing: content-box !important;
  z-index: 1;
}
.head2_search .searchbar .input-group-btn {
  position: absolute;
  right: 0;
  top: 0;
}

/*公司公告*/
.bg_all {
  width: 100%;
  background: #f1f3f6;
  padding: 60px 0 0 0;
}

/*服务入口*/
.service {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  background: #fff;
  padding: 30px 0;
}
.service_box {
  width: 300px;
  float: left;
}
.service_box a {
  display: block;
}
.service_box a img {
  width: 60px;
  height: 60px;
  padding-bottom: 25px;
  margin: 0 auto;
}
.service_box a p {
  font-size: 16px;
  color: #000;
  text-align: center;
  font-weight: 400;
}
.service_box a p:hover {
  color: #2892ff;
}

/*业务推荐*/
.business {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  height: 720px;
}
.business_box01 {
  position: absolute;
  left: 0;
  top: 0;
  width: 800px;
  height: 360px;
}
.business_box02 {
  position: absolute;
  right: 0;
  top: 0;
  width: 400px;
  height: 360px;
}
.business_box02 .bs_pic {
  position: relative;
}
.business_box02 .bs_pic img {
  width: 400px;
  height: 360px;
}
.bs_bm h3 {
  padding-top: 80px;
}
.bs_bm h3 a {
  font-size: 20px;
  color: #fff;
}
.bs_bm .bsbm_txt {
  padding-top: 10px;
}
.bs_bm .bsbm_txt a {
  font-size: 16px;
  color: #fff;
}
.bs_bm .bsbm_txt i {
  font-size: 16px;
  color: #fff;
  margin: 0 10px;
  font-style: normal;
}
.business_box03 {
  position: absolute;
  left: 0;
  top: 360px;
  width: 400px;
  height: 360px;
}
.business_box04 {
  position: absolute;
  left: 400px;
  top: 360px;
  width: 800px;
  height: 360px;
  background: #fff;
}
.yewu_box {
  width: 235px;
  float: left;
  height: 150px;
  padding: 30px 0 0 30px;
}
.yewu_box a {
  display: block;
}
.yewu_box a img {
  width: 50px;
  height: 50px;
}
.yw_bm h3 {
  font-weight: bold;
  padding: 20px 0 10px 0;
  font-size: 20px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
}
.yw_bm .ywbm_txt {
  font-size: 16px;
  color: #888;
}
.yewu_box:nth-of-type(1) {
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.yewu_box:nth-of-type(2) {
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.yewu_box:nth-of-type(3) {
  border-bottom: 1px solid #e8e8e8;
}
.yewu_box:nth-of-type(4) {
  border-right: 1px solid #e8e8e8;
}
.yewu_box:nth-of-type(5) {
  border-right: 1px solid #e8e8e8;
}

/*品牌介绍*/
.brand {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0 100px 0;
  overflow: hidden;
}
.brand_box {
  width: 380px;
  height: 405px;
  overflow: hidden;
  float: left;
  margin-right: 30px;
}
.brand_pic {
  width: 380px;
  height: 200px;
}
.brand_pic img {
  width: 380px;
  height: 200px;
}
.brand_bm {
  background: #fff;
  padding: 20px 20px 30px 20px;
}
.brand_bm h3 {
  font-size: 20px;
  color: #000;
  font-weight: 600;
}
.brand_bm span {
  display: block;
  font-size: 14px;
  color: #000;
  padding: 10px 0 20px 0;
  font-weight: 600;
}
.brand_bm p {
  font-size: 14px;
  color: #333;
  line-height: 28px;
}
.brand_box:last-child {
  margin: 0;
}

.brand_bm p font {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制你希望显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

</style>